/*
 * MIT License
 *
 * Copyright (c) 2024 tuxming@sina.com / wechat: angft1
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */




import {Typography, Switch, Space, theme, ColorPicker, Slider, Row, Col, Radio, Button} from "antd"
import { 
    SunOutlined,
    MoonOutlined,
    CloseOutlined,
    CheckOutlined,
    ReloadOutlined
} from '@ant-design/icons';
import { themeConfigSlice } from '../../../redux/CommonSlice';
import { useTranslation, useSelector, useDispatch } from "../../../hooks";
import { AdminSkinSetting } from "../../../common/I18NNamespace";

/**
 * 主题设置
 */
export const ThemeSettingComponent : React.FC = () => {
    const { t } = useTranslation(AdminSkinSetting);
    const borderRadius = useSelector(state => state.themeConfig.borderRadius);
    const dispatch = useDispatch();
    const themeType = useSelector(state => state.themeConfig.theme);
    const onlyIcon = useSelector(state => state.themeConfig.onlyIcon);
    const componentSize = useSelector(state => state.themeConfig.componentSize);

    const onChangeTheme = (checked: boolean, event) => {
        document.body.classList.remove(themeType);
        let newType = checked?'light':'dark';
        dispatch(themeConfigSlice.actions.changeTheme(newType));
        document.body.classList.add(newType);
    }

    const changePrimaryColor = (color) => {
        dispatch(themeConfigSlice.actions.changeColor(color))
    }

    const changeBorderRadius = (value) => {
        dispatch(themeConfigSlice.actions.changeBorderRadius(value));
    }

    const changeOnlyIcon = (value) => {
        dispatch(themeConfigSlice.actions.changeOnlyIcon(value));
    }

    const onComponeSizeChange = (event: any) => {
        // console.log(event.target.value);
        dispatch(themeConfigSlice.actions.changeComponentSize(event.target.value));
    }

    const {token} = theme.useToken();
    
    const colors = [
        token['red-5'],
        token.volcano5,
        token.orange5,
        token.gold5,
        token.yellow6,
        token.lime6,
        token.green6,
        token.cyan6,
        token.blue6,
        token.geekblue6,
        token.purple5,
        token['magenta-6'],
    ]

    const imgData = '';

    const reset = () => {
        dispatch(themeConfigSlice.actions.resetTheme(null));
    }

    return <>
        <Typography.Title level={5}>{t('主题')}</Typography.Title>
        <Space align="center">
            {t('暗色')}
            <Switch
                checkedChildren={<SunOutlined />}
                unCheckedChildren={<MoonOutlined />}
                defaultChecked={themeType == 'light'}
                onChange={onChangeTheme}
            />
            {t('亮色')}
        </Space>
        <div>
            <Typography.Text strong style={{display:'block',marginTop: 25, marginBottom: 10}}>{t('主颜色')}</Typography.Text>
            <Space align="center" wrap>
                {colors.map(color => <span className='color-block-wrap' key={color}>
                    <span onClick={() => changePrimaryColor(color)} className="color-block" style={{background: color}}></span>
                    </span>
                )}
                <span className='color-block-wrap' >
                    <ColorPicker defaultValue="#1677ff" onChange={(value, hex)=>{changePrimaryColor(hex)}}><img className='color-block' src={imgData}/></ColorPicker>
                </span>
            </Space>
        </div>
        <div>
            <Typography.Text strong style={{display:'block',marginTop: 25, marginBottom: 10}}>{t('组件圆角')}</Typography.Text>
            <Row align='middle'>
                <Col span={20}>
                    <Slider
                        min={1}
                        max={40}
                        onChange={changeBorderRadius}
                        value={borderRadius}
                    />
                </Col>
                <Col span={4}>
                    <Typography.Text>{borderRadius}</Typography.Text>
                </Col>
            </Row>
        </div>

        <Typography.Title level={5}>{t('只显示图标')}</Typography.Title>
        <Space align="center">
            <Switch
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
                defaultChecked = {onlyIcon}
                onChange={changeOnlyIcon}
            />
        </Space>

        <Typography.Title level={5}>{t('组件尺寸')}</Typography.Title>
        <Space align="center">
        <Radio.Group onChange={onComponeSizeChange} value={componentSize}>
            <Radio value={'small'}>小</Radio>
            <Radio value={'middle'}>中</Radio>
            <Radio value={'large'}>大</Radio>
        </Radio.Group>
        </Space>

        <div style={{margin: "25px 0px", textAlign: "center"}}>
            <Button onClick={reset} block type="primary" icon={<ReloadOutlined />}>{t("重置")}</Button>
        </div>
    </>
}